<!-- 消息列表模块内容 -->
<div class="chat-container">
  <!-- 左侧边栏 -->
  <div class="chat-sidebar">
    <!-- 搜索框 -->
    <div class="search-box">
      <input type="text" placeholder="搜索联系人或消息..." id="searchInput">
    </div>

    <!-- 聊天列表 -->
    <div class="chat-list" id="chatList">
      <!-- 聊天项将动态添加 -->
      <div class="empty-state">
        <div class="empty-text">暂无消息</div>
      </div>
    </div>
  </div>

  <!-- 聊天主区域 -->
  <div class="chat-main">
    <!-- 欢迎屏 -->
    <div class="chat-welcome" id="chatWelcome">
      <h2>欢迎使用消息功能</h2>
      <p>选择一个联系人开始聊天</p>
    </div>

    <!-- 聊天窗口（默认隐藏） -->
    <div class="chat-window" id="chatWindow" style="display: none;">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <div class="contact-info">
          <div class="contact-details">
            <div class="contact-name" id="contactName">联系人</div>
            <div class="contact-status" id="contactStatus">在线</div>
          </div>
        </div>
        <!-- 聊天操作按钮已移除 -->
      </div>

      <!-- 消息区域 -->
      <div class="message-area" id="messageArea">
        <!-- 消息将动态添加 -->
      </div>

      <!-- 输入区域已移除 -->
    </div>
  </div>
</div>

<!-- 需要加载 chat-list.css 样式 -->
<link rel="stylesheet" href="./styles/chat-list.css">
